<template>
  <div>
    <!-- 按钮 -->
    <el-button type="primary" icon="el-icon-plus">添加</el-button>
    <!--
      表格组件
      data：表格组件将来需要展示的数据------数组类型
      border：是给表格添加边框
      column属性
      label：显示标题
      width：对应列的宽度
      align：标题的对齐方式
     -->
    <el-table
      :data="tableData"
      style="width: 100%"
      border=""
    >
      <el-table-column
        type="index"
        label="序号"
        width="80"
        align="center"
      />
      <el-table-column
        prop="tmName"
        label="品牌名称"
        width="180"
        align="center"
      />
      <el-table-column
        prop="logoUrl"
        label="品牌LOGO"
        align="center"
      >
        <!--  <template slot-scope="msg">
          {{ msg.row }}
        </template> -->

        <template slot-scope="{row,$index}">
          <!--  {{ row }} -->
          <img :src="row.logoUrl" alt="" style="width:100px;height:100px">
        <!--  <img src="./static/default.jpg" alt="" style="width:100px;height:100px"> -->
        </template>
      </el-table-column>
      <el-table-column
        prop="prop"
        label="操作"
        align="center"
      >
        <template slot-scope="{row,$index}">
          <el-button type="warning" icon="el-icon-edit" size="mini">修改</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
        </template>
      </el-table-column>
      /</el-table>

    <!--
      分页器
      当前第几页，数据总条数，每一页展示的条数，连续页码数
       @size-change="handleSizeChange"
      @current-change="handleCurrentChange"

      current-page：代表当前第几页
      page-size：代表每一页需要展示多少数据
      total：代表分页器一共需要展示数据条数
      page-sizes：代表可以设置每一页展示多少条数据
      layout：可以实现分页器布局
      pager-count：按钮的数量 如果 9  连续页码是7
    -->
    <el-pagination
      style="margin-top:20px;text-align:center"
      :current-page="page"
      :page-size="limit"
      :total="total"
      :page-sizes="[3, 5, 7]"
      layout=" prev, pager, next, jumper,->,total, sizes"
      :pager-count="5"
      @current-change="getTradeMarkList"
      @size-change="handleSizeChange"
    />

  </div>

</template>

<script>
export default {
  name: 'TradeMark',
  data() {
    return {
      // 代表分页器第几页
      page: 1,
      // 当前页数展示的数据条数
      limit: 9,
      // 列表展示的数据
      tableData: [],
      // 总数据条数
      total: 0
    }
  },
  mounted() {
    // 获取列表数据
    this.getTradeMarkList()
  },
  methods: {
    // 获取品牌列表的数据
    async getTradeMarkList(pageNow = 1) {
      this.page = pageNow
      // 获取品牌列表的接口
      const result = await this.$API.tradeMark.reqGetTradeMarkList(this.page, this.limit)
      /*  console.log(result) */
      if (result.code === 200) {
        this.tableData = result.data.records
        this.total = result.data.total
        return 'ok'
      } else {
        return Promise.reject(new Error('faile'))
      }
    },
    // 当分页器需要展示数据条数发生变化时会触发
    handleSizeChange(pageSize) {
      // 整理参数
      this.limit = pageSize
      this.getTradeMarkList()
    }
  }
}
</script>

<style>

</style>
